import React,{ useEffect, useState } from "react"
import { useSingleState } from 'nice-hooks'
import * as echarts from 'echarts'
import "./garfield.scss";
import Garzi from "../../components/garZi";


function Garfield(){
    const [state,setState]=useSingleState({
        num:[1,2,3,4,5,6,7,8,9],
        msg:"我是父组件传递过来的值"
    })

    useEffect(()=>{
        
    },[])

    const run=()=>{
        console.log("子组件调用父组件的方法！")
    }

    return(
        <div>
            <Garzi msg={state.msg} run ={run} />
            <ul className="ul">
                {state.num.map((item,index)=>{
                    return <li key={item}>{state.num.map((item1,index)=>{
                        if(item1>=item){
                            return <p key={index}>{item}*{item1}={item*item1}</p>
                        }
                    })}</li>
                })}
            </ul>
            <ul className="ul">
                {state.num.map((item,index)=>{
                    return <li key={item}>{state.num.map((item1,index)=>{
                        return <p key={item1}>{item1>=item?(item+'÷'+item1+'='+(item/item1).toFixed(2)):''}</p>
                    })}</li>
                })}
            </ul>
            <ul className="ul">
                {state.num.map((item,index)=>{
                    return <li key={item}>{state.num.map((item1,index)=>{
                        if(item1>=item){
                            return <p key={index}>{item}+{item1}={item+item1}</p>
                        }
                    })}</li>
                })}
            </ul>
            <ul className="ul">
                {state.num.map((item,index)=>{
                    return <li key={item}>{state.num.map((item1,index)=>{
                        return <p key={item1}>{item1>=item?(item+'-'+item1+'='+(item-item1)):''}</p>
                    })}</li>
                })}
            </ul>
        </div>
    )
}

export default Garfield